<template>
	<view>
		<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
			class="picker-view" :style="[picvieStyle]">
			<picker-view-column>
				<view class="item " v-for="(item,index) in list" :key="index"
					:class="index==currentIndex?'items':'item'" @tap.stop="doubt(index)">
					<view class="">
						{{item.title}}
					</view>
					<view v-if="showBar&&index==currentIndex&&item.remk != ''" class="" style="margin-left: 12rpx;"
						>
						<u-icon name="question-circle" :color="index==currentIndex?'#FFF':activeColor" size="30">
						</u-icon>
					</view>
					<view v-if="showBar&&index!=currentIndex&&item.remk != ''" style="margin-left: 12rpx;">
						<u-icon name="question-circle" :color="index==currentIndex?'#FFF':activeColor" size="30">
						</u-icon>
					</view>
				</view>
			</picker-view-column>

		</picker-view>
		
		
		<u-popup v-model="show"  border-radius="20" mode="center" :closeable="true">
			<view class="popShop">
				<view class="popShop-t1 u-line-2">
					<text>{{title}}</text>
				</view>
				<view class="popShop-t2">
			<!-- 		<scroll-view  scroll-y="true" class="scroll-Y" show-scrollbar="true">
							<text decode="true">{{remk}}</text>
					</scroll-view> -->
					<text  decode="true"  >{{remk}}</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		name: 'vv-select',
		props: {
			list: {
				type: [Array]
			},
			// 选中项的主题颜色
			activeColor: {
				type: String,
				default: '#FCAF28'
			},
			// 选中项的颜色
			inactiveColor: {
				type: String,
				default: '#FFF'
			},
			// 是否显示问号
			showBar: {
				type: Boolean,
				default: true
			},
			// 组件宽度
			barWidth: {
				type: [String, Number],
				default: 750
			},
			// 组件的高度
			barHeight: {
				type: [String, Number],
				default: 400
			},
		},
		data: function() {
			return {
				title:'',
				remk:'',
				show: false,
				currentIndex: 0,
				value: [],
				visible: true,
				indicatorStyle: `height: 60px;background-color: #FCAF28;z-index:0;`,
			}
		},
		computed: {
			picvieStyle() {
				let style = {
					width: this.barWidth + 'rpx',
					height: this.barHeight + 'rpx',
					// 设置一个很大的值，它会自动取能用的最大值，不用高度的一半，是因为高度可能是单数，会有小数出现
				};
				// Object.assign(style, this.barStyle);
				return style;
			}
		},
		mounted() {
				 //this.getModel()
			
		},
		  watch: {
		    list: {
		      handler(val) {
				// console.log(this.list)
				this.getModel();
		      },
		      deep: true,
		      immediate: true
		    },
		  },
		methods: {
			getModel(){
				console.log( this.list)
				if(this.list&&this.list[this.currentIndex]){
					this.title = this.list[this.currentIndex].title
					this.remk = this.list[this.currentIndex].remk
				}
			
			},
			bindChange: function(e) {
				this.currentIndex = e.detail.value[0]
				this.$emit('change', this.currentIndex);
				this.getModel()
			},
			doubt(i) {
				this.list[i].show = true
				this.show=true
			}
		}
	}
</script>
<style>
	.picker-view {}
	.scroll-Y{
		height: 350rpx;
	}
	.item {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.items {
		background-color: transparent;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
	}
	.popShop{
		padding: 40rpx 22rpx 20rpx 22rpx;
		width: 590rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.popShop-t1{
		display: flex;
		justify-content: center;
		width: 500rpx;
		font-weight: 500;
		color: #18326E;
	}
	.popShop-t2{
		color: #A1ACBF;
		text-indent:30rpx;
		margin-top: 10rpx;
	}
</style>
